<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<title>子墨商城</title>
    </head>
	<body>
		<!-- header.jsp -->
		<jsp:include page="header.jsp"></jsp:include>
		<!-- /header.jsp -->

		<%--SECTION banner--%>
		<div class="section">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div id="banner" class="carousel slide" data-interval="2500">
							<!-- 轮播（Carousel）指标 -->
							<ol class="carousel-indicators">
								<li data-target="#banner" data-slide-to="0" class="active"></li>
								<li data-target="#banner" data-slide-to="1"></li>
								<li data-target="#banner" data-slide-to="2"></li>
								<li data-target="#banner" data-slide-to="3"></li>
								<li data-target="#banner" data-slide-to="4"></li>
							</ol>
							<!-- 轮播（Carousel）项目 -->
							<div class="carousel-inner">
								<div class="item active">
									<img style="width: 100%" src="${pageContext.request.contextPath}/asserts/reception/img/banner.jpg" alt="First slide">
								</div>
								<div class="item">
									<img style="width: 100%" src="${pageContext.request.contextPath}/asserts/reception/img/banner1.jpg" alt="First slide">
								</div>
								<div class="item">
									<img style="width: 100%" src="${pageContext.request.contextPath}/asserts/reception/img/banner2.jpg" alt="Second slide">
								</div>
								<div class="item">
									<img style="width: 100%" src="${pageContext.request.contextPath}/asserts/reception/img/banner3.jpg" alt="Third slide">
								</div>
								<div class="item">
									<img style="width: 100%" src="${pageContext.request.contextPath}/asserts/reception/img/banner4.jpg" alt="Third slide">
								</div>
							</div>
							<!-- 轮播（Carousel）导航 -->
							<a class="left carousel-control" href="#banner" role="button" data-slide="prev">
								<span style="display: inline-block;position: absolute;top: 50%;" class="fa fa-chevron-left" aria-hidden="true"></span>
								<span class="sr-only">上一条</span>
							</a>
							<a class="right carousel-control" href="#banner" role="button" data-slide="next">
								<span style="display: inline-block;position: absolute;top: 50%;" class="fa fa-chevron-right" aria-hidden="true"></span>
								<span class="sr-only">下一条</span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<%--/SECTION banner--%>

		<!-- SECTION -->
		<div class="section">
			<!-- container -->
			<div class="container">
				<!-- row -->
				<div class="row">

					<!-- section title -->
					<div class="col-md-12">
						<div class="section-title">
							<h3 class="title">最新上架</h3>
						</div>
					</div>
					<!-- /section title -->

					<!-- Products tab & slick -->
					<div class="col-md-12">
						<div class="row">
							<div class="products-tabs">
								<!-- tab -->
								<div class="tab-pane active">
									<div class="products-slick" data-nav="#slick-nav-1">

										<c:forEach items="${newestProducts}" var="p">
											<!-- product -->
											<div class="product">
												<div class="product-img">
													<img src="${pageContext.request.contextPath}/${p.pimage}" alt="${p.pname}">
													<div class="product-label">
														<span class="new">NEW</span>
													</div>
												</div>
												<div class="product-body">
													<p class="product-category">
														<c:forEach items="${categorys}" var="c">
															<c:if test="${p.cid == c.cid}">${c.cname}</c:if>
														</c:forEach>
													</p>
													<h3 class="product-name">
														<a href="${pageContext.request.contextPath}/product?method=productDetails&pid=${p.pid}">${p.pname}</a>
													</h3>
													<h4 class="product-price">￥${p.shop_price} <del class="product-old-price">￥${p.market_price}</del></h4>
													<div class="product-rating">
														<i class="fa fa-star"></i>
														<i class="fa fa-star"></i>
														<i class="fa fa-star"></i>
														<i class="fa fa-star"></i>
														<i class="fa fa-star"></i>
													</div>
													<div class="product-btns">
														<button class="quick-view" onclick="productDeatils('${p.pid}')"><i class="fa fa-eye"></i><span class="tooltipp">商品详情查看</span></button>
													</div>
												</div>
												<div class="add-to-cart">
													<button class="add-to-cart-btn" onclick="addProductToCart('${p.pid}')"><i class="fa fa-shopping-cart"></i> 加入购物车</button>
												</div>
											</div>
											<!-- /product -->
										</c:forEach>

									</div>
									<div id="slick-nav-1" class="products-slick-nav"></div>
								</div>
								<!-- /tab -->
							</div>
						</div>
					</div>
					<!-- Products tab & slick -->
				</div>
				<!-- /row -->
			</div>
			<!-- /container -->
		</div>
		<!-- /SECTION -->

		<!-- SECTION -->
		<div class="section">
			<!-- container -->
			<div class="container">
				<!-- row -->
				<div class="row">

					<!-- section title -->
					<div class="col-md-12">
						<div class="section-title">
							<h3 class="title">热门商品</h3>
						</div>
					</div>
					<!-- /section title -->

					<!-- Products tab & slick -->
					<div class="col-md-12">
						<div class="row">
							<div class="products-tabs">
								<!-- tab -->
								<div id="tab2" class="tab-pane fade in active">
									<div class="products-slick" data-nav="#slick-nav-2">
										<c:forEach items="${hotestProducts}" var="p">
											<!-- product -->
											<div class="product">
												<div class="product-img">
													<img src="${pageContext.request.contextPath}/${p.pimage}" alt="${p.pname}">
													<div class="product-label">
														<span class="hot">HOT</span>
													</div>
												</div>
												<div class="product-body">
													<p class="product-category">
														<c:forEach items="${categorys}" var="c">
															<c:if test="${p.cid == c.cid}">${c.cname}</c:if>
														</c:forEach>
													</p>
													<h3 class="product-name">
														<a href="${pageContext.request.contextPath}/product?method=productDetails&pid=${p.pid}">${p.pname}</a>
													</h3>
													<h4 class="product-price">￥${p.shop_price} <del class="product-old-price">￥${p.market_price}</del></h4>
													<div class="product-rating">
														<i class="fa fa-star"></i>
														<i class="fa fa-star"></i>
														<i class="fa fa-star"></i>
														<i class="fa fa-star"></i>
														<i class="fa fa-star"></i>
													</div>
													<div class="product-btns">
														<button class="quick-view" onclick="productDeatils('${p.pid}')"><i class="fa fa-eye"></i><span class="tooltipp">商品详情查看</span></button>
													</div>
												</div>
												<div class="add-to-cart">
													<button class="add-to-cart-btn" onclick="addProductToCart('${p.pid}')"><i class="fa fa-shopping-cart"></i> 加入购物车</button>
												</div>
											</div>
											<!-- /product -->
										</c:forEach>
									</div>
									<div id="slick-nav-2" class="products-slick-nav"></div>
								</div>
								<!-- /tab -->
							</div>
						</div>
					</div>
					<!-- /Products tab & slick -->
				</div>
				<!-- /row -->
			</div>
			<!-- /container -->
		</div>
		<!-- /SECTION -->

		<!-- footer.jsp -->
		<jsp:include page="footer.jsp"></jsp:include>
		<!-- /footer.jsp -->

	</body>
	<script>
		$(document).ready(function () {
			$('#banner').carousel('cycle');
		});
	</script>
</html>
